import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { inject, observer } from 'mobx-react';
import { Flex, SearchBar, Avatar, Bubble, Tools } from 'weaver-mobile';
import { ListViewPage } from 'weaver-mobile-page';
import { urlParse } from '../util';

const getLabel = Tools.getLabel;

@withRouter
@inject('voteStore')
@observer
class PersonList extends Component {
  constructor(props) {
    super(props)
    this.prefixCls = 'group-vote-personlist'
  }
  
  componentDidMount() {
    const { voteStore: { groupchatvoteprelist, setStoreState }, match: { params }, location: { search } } = this.props;
    let interfaceParams = { usertype: params.usertype};
    if (search) {
      let searchInfo = urlParse(search)
      interfaceParams = {...interfaceParams, optionid: searchInfo.optionid}
    }
    if (window.em) {
      window.em.ready(() => {
        let res = window.em.checkJsApi("getTargetInfo");
        if (res) {
          window.em.getTargetInfo({
            success: function(res) {
              setStoreState(interfaceParams)
              groupchatvoteprelist({...interfaceParams, groupid: res.targetId});
            },
            fail: function(res) {
              Bubble.error(res.errMsg || '方法请求失败')
            }
          })
        }
      })
    } else {
      setStoreState(interfaceParams)
      groupchatvoteprelist(interfaceParams);
    }
  }

  componentWillUnmount() {
    const { voteStore: { personList, setStoreState, viewGroupVote, dataInfo } } = this.props;
    if (dataInfo.votestatus === '0') {
      viewGroupVote('', true); // 刷新详情信息
    }
    personList.clearData(); // 清空列表数据
    setStoreState({ 
      usertype: '', 
      optionid: '',
      personSearchName: '', 
    })
  }

  openHrmCard = (id) => {
    if (window.em && (typeof window.em.checkJsApi === 'function') && window.em.checkJsApi('openLink')) {
      window.em.openLink({
        url: `/spa/hrm/static4mobile/index.html#/resourceInfo/${id}`,
        openType: 2,
        sysId: window.localStorage.emobile_ec_id,
      });
    }
  }
  
  getTemplate = () => {
    const newTemp = {
      default: [{
        key: 'col_1',
        render: (data) => {
          let curCls = `${this.prefixCls}-list-line`;
          return (
            <div className={curCls}>
              <div className={`${curCls}-avatar`}>
                <Avatar userId={data.id} url={data.messagerurlspan || ''} name={data.voteusername} />
              </div>
              <Flex className={`${curCls}-box`} justify='between' align='start'>
                <Flex.Item className={`${curCls}-humaninfo`}>
                  <div className={`${curCls}-humaninfo-name`} onClick={() => this.openHrmCard(data.id)}>{data.voteusername}</div>
                  <div className={`${curCls}-humaninfo-department`}>{data.subcompanyname}</div>
                </Flex.Item>
                <Flex.Item className={`${curCls}-jobinfo`}>
                  <div className={`${curCls}-jobinfo-title`}>{data.jobtitlename}</div>
                  <div className={`${curCls}-jobinfo-department`}>{data.departmentname}</div>
                </Flex.Item>
              </Flex>
            </div>
          );
        },
      }],
    };
    return newTemp;
  }

  render () {
    const { voteStore: { personList, groupchatvoteprelist, personSearchName, setStoreState } } = this.props;
    return (
      <div className={this.prefixCls}>
        <SearchBar 
          placeholder={getLabel('516184','请输入成员姓名')}
          value={personSearchName}
          onChange={v => setStoreState({personSearchName: v})}
          onSubmit={v => {setStoreState({personSearch: true}); groupchatvoteprelist({ lastname: v })}}
        />
        <div className={`${this.prefixCls}-list`}>
          <ListViewPage.Normal
            store={personList}
            customHeight={'100%'}
            getTemplate={this.getTemplate}
            onRefresh={() => groupchatvoteprelist()}
          />
        </div>
      </div>
    )
  }
}

export default PersonList